﻿<!doctype html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>可缩放jQuery图片裁剪插件</title>
<link href="http://cdn.bootcss.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet">
<link href="css/cropper.min.css" rel="stylesheet">
<link href="css/main.css" rel="stylesheet">
<!--[if IE]>
	<script src="http://libs.useso.com/js/html5shiv/3.7/html5shiv.min.js"></script>
<![endif]-->
</head>
<body>

<!-- Content start -->
<div class="container">

	<div class="row">
		<div class="col-md-9">
			<!-- <h3 class="page-header">Demo:</h3> -->
			<div class="img-container">
				<img src="images/picture.jpg" alt="Picture">
			</div>
		</div>
		<div class="col-md-3">
			<!-- <h3 class="page-header">Preview:</h3> -->
			<div class="docs-preview clearfix">
			  <div class="img-preview preview-lg"></div>
			  <div class="img-preview preview-md"></div>
			  <div class="img-preview preview-sm"></div>
			  <div class="img-preview preview-xs"></div>
			</div>

		</div>
	</div>

	<div class="row">
		<div class="btn-group">
		  <button class="btn btn-primary" data-method="setDragMode" data-option="move" type="button" title="Move">
			<span class="docs-tooltip" data-toggle="tooltip" title="$().cropper(&quot;setDragMode&quot;, &quot;move&quot;)">
			  <span class="icon icon-move"></span>
			</span>
		  </button>
		  <button class="btn btn-primary" data-method="setDragMode" data-option="crop" type="button" title="Crop">
			<span class="docs-tooltip" data-toggle="tooltip" title="$().cropper(&quot;setDragMode&quot;, &quot;crop&quot;)">
			  <span class="icon icon-crop"></span>
			</span>
		  </button>
		  <button class="btn btn-primary" data-method="zoom" data-option="0.1" type="button" title="Zoom In">
			<span class="docs-tooltip" data-toggle="tooltip" title="$().cropper(&quot;zoom&quot;, 0.1)">
			  <span class="icon icon-zoom-in"></span>
			</span>
		  </button>
		  <button class="btn btn-primary" data-method="zoom" data-option="-0.1" type="button" title="Zoom Out">
			<span class="docs-tooltip" data-toggle="tooltip" title="$().cropper(&quot;zoom&quot;, -0.1)">
			  <span class="icon icon-zoom-out"></span>
			</span>
		  </button>
		  <button class="btn btn-primary" data-method="rotate" data-option="-45" type="button" title="Rotate Left">
			<span class="docs-tooltip" data-toggle="tooltip" title="$().cropper(&quot;rotate&quot;, -45)">
			  <span class="icon icon-rotate-left"></span>
			</span>
		  </button>
		  <button class="btn btn-primary" data-method="rotate" data-option="45" type="button" title="Rotate Right">
			<span class="docs-tooltip" data-toggle="tooltip" title="$().cropper(&quot;rotate&quot;, 45)">
			  <span class="icon icon-rotate-right"></span>
			</span>
		  </button>
		</div>

		<div class="btn-group">
		  <button class="btn btn-primary" data-method="disable" type="button" title="Disable">
			<span class="docs-tooltip" data-toggle="tooltip" title="$().cropper(&quot;disable&quot;)">
			  <span class="icon icon-lock"></span>
			</span>
		  </button>
		  <button class="btn btn-primary" data-method="enable" type="button" title="Enable">
			<span class="docs-tooltip" data-toggle="tooltip" title="$().cropper(&quot;enable&quot;)">
			  <span class="icon icon-unlock"></span>
			</span>
		  </button>
		  <button class="btn btn-primary" data-method="clear" type="button" title="Clear">
			<span class="docs-tooltip" data-toggle="tooltip" title="$().cropper(&quot;clear&quot;)">
			  <span class="icon icon-remove"></span>
			</span>
		  </button>
		  <button class="btn btn-primary" data-method="reset" type="button" title="Reset">
			<span class="docs-tooltip" data-toggle="tooltip" title="$().cropper(&quot;reset&quot;)">
			  <span class="icon icon-refresh"></span>
			</span>
		  </button>
		  <label class="btn btn-primary btn-upload" for="inputImage" title="Upload image file">
			<input class="sr-only" id="inputImage" name="file" type="file" accept="image/*">
			<span class="docs-tooltip" data-toggle="tooltip" title="Import image with Blob URLs">
			  <span class="icon icon-upload"></span>
			</span>
		  </label>
		  <button class="btn btn-primary" data-method="destroy" type="button" title="Destroy">
			<span class="docs-tooltip" data-toggle="tooltip" title="$().cropper(&quot;destroy&quot;)">
			  <span class="icon icon-off"></span>
			</span>
		  </button>
		</div>

		<div class="btn-group">
			<label class="btn btn-primary" data-method="setAspectRatio" data-option="1.7777777777777777" title="Set Aspect Ratio">
				<input class="sr-only" id="aspestRatio1" name="aspestRatio" value="1.7777777777777777" type="radio">
				<span class="docs-tooltip" data-toggle="tooltip" title="$().cropper(&quot;setAspectRatio&quot;, 16 / 9)">
				  16:9
				</span>
			</label>
			<label class="btn btn-primary" data-method="setAspectRatio" data-option="1.3333333333333333" title="Set Aspect Ratio">
				<input class="sr-only" id="aspestRatio2" name="aspestRatio" value="1.3333333333333333" type="radio">
				<span class="docs-tooltip" data-toggle="tooltip" title="$().cropper(&quot;setAspectRatio&quot;, 4 / 3)">
				  4:3
				</span>
			</label>
			<label class="btn btn-primary active" data-method="setAspectRatio" data-option="1" title="Set Aspect Ratio">
				<input class="sr-only" id="aspestRatio3" name="aspestRatio" value="1" type="radio">
				<span class="docs-tooltip" data-toggle="tooltip" title="$().cropper(&quot;setAspectRatio&quot;, 1 / 1)">
				  1:1
				</span>
			</label>
			<label class="btn btn-primary" data-method="setAspectRatio" data-option="0.6666666666666666" title="Set Aspect Ratio">
				<input class="sr-only" id="aspestRatio4" name="aspestRatio" value="0.6666666666666666" type="radio">
				<span class="docs-tooltip" data-toggle="tooltip" title="$().cropper(&quot;setAspectRatio&quot;, 2 / 3)">
				  2:3
				</span>
			</label>
			<label class="btn btn-primary" data-method="setAspectRatio" data-option="NaN" title="Set Aspect Ratio">
				<input class="sr-only" id="aspestRatio5" name="aspestRatio" value="NaN" type="radio">
				<span class="docs-tooltip" data-toggle="tooltip" title="$().cropper(&quot;setAspectRatio&quot;, NaN)">
				  Free
				</span>
			</label>
		</div>

	</div>

</div>
<!-- Content end -->

<script src="http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script>
<script src="js/cropper.min.js"></script>
<script src="js/main.js"></script>

</body>
</html>